<template>
  <div v-drag>
    <div class="mask" @click="closePopup('')"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{isConfirm == 1 ? '接收退货单':(isConfirm == 2 ? '确定回收退货单':'清点退货单')}}</p>
        <i @click="closePopup('')"></i>
      </div>
      <div class="box_body">
        <div v-for="(link,index) in data" :key="index" class="input-box g-mb-10" id="link" style="margin-top: 30px;">
          <div class="box">
            <div class="img_box">
              <div>
                <img :src="data[index].productPhoto" class="avatar" alt="tzs" v-if="data[index].productPhoto">
                <p v-else>——</p>
              </div>
            </div>
            <div class="right">
              <div class="input_box">
                <div class="name">
                  <span>商品名：</span>
                  <span>{{ data[index].productName ? data[index].productName : '--' }} </span>
                </div>
              </div>

              <div class="sonData">

                <div>
                  <el-input placeholder="数量" type="number" size="mini" disabled min="0" v-model="data[index].receivableNumber">
                    <template slot="prepend">应收数</template>
                  </el-input>
                </div>

                <div v-if="isConfirm == 3">
                  <el-input placeholder="数量" type="number" size="mini" :disabled="Boolean(isConfirm == 1 || isConfirm == 2)" min="0" v-model.number="data[index].payableNumber">
                    <template slot="prepend">清点数</template>
                  </el-input>
                </div>
                <template v-if="isConfirm == 4">
                <div>
                  <el-input placeholder="数量" type="number" size="mini" disabled min="0" v-model.number="data[index].applyNumber">
                    <template slot="prepend">清点数</template>
                  </el-input>
                </div>

                  <div>
                    <el-input placeholder="数量" type="number" size="mini" min="0" v-model.number="data[index].payableNumber">
                      <template slot="prepend">实收数</template>
                    </el-input>
                  </div>

                </template>

              </div>

            </div>

          </div>

        </div>
      </div>
      <div v-if="isConfirm" class="box_foot">
        <span @click="closePopup('')">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>

    </div>
  </div>
</template>

<script>
import {confirmChange, confirmSend, manageCheck, returnDetail, senderCheck} from "@/api/data/user/productReturn";

export default {
  props: ['orderId', 'isConfirm','userId'],
  data() {
    return {
      loading: false,
      data: {},
    }
  },
  mounted() {
      this.getDetail();
  },
  methods: {
    getDetail() {
      let that = this;
      this.loading = true;
      returnDetail(that.orderId).then(res => {
        if (res) {
          // that.initData(res);
          that.data = res;
        }
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
    },
    confirmEdit() {
      let that = this;
      if(that.isConfirm == 3 || that.isConfirm == 4) {
        this.$confirm('确定清点?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.handleSenderCheck();
        }).catch(() => {
        })
      }else {
        let text = '';
        if(that.isConfirm == 1) {
          text = '确定接收退货单?'
        }else if(that.isConfirm == 2) {
          text = '确定回收退货单?'
        }
        that.$confirm(text, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(that.isConfirm == 1) {
            confirmChange({returnNo: that.orderId}).then((res)=> {
              that.closePopup(1)
            });
          }else if(that.isConfirm ==2) {
            confirmSend({returnNo: that.orderId}).then((res)=> {
              that.closePopup(1)
            });
          }
        }).then(() => {
        }).catch(() => {
        });
      }

    },
    // initData(data) {
    //   this.proNum = data;
    //   this.proNum.forEach((item,index)=> {
    //       // let obj = {productId:item.productId,payableNumber:0,productPhoto:item.productPhoto,productName:item.productName}
    //       item.payableNumber = 0;
    //       return item;
    //   })
    // },
    handleSenderCheck() {
      let that = this;
      let param = {
        details:that.data,
        returnNo:that.orderId,
        userId:that.userId
      }
      if(that.isConfirm ==3) {
        senderCheck(param).then((res)=> {
          that.$message.success({
            message:'清点成功！',
            duration:1500
          });
          that.closePopup(1)
        });
      }else if(this.isConfirm == 4) {
        manageCheck(param).then((res)=> {
          that.$message.success({
            message:'清点成功！',
            duration:1500
          });
          that.closePopup(1)
        });
      }
    },
    sendData() {

    },
    // 关闭
    closePopup(refresh) {
      this.$emit('listenToChild', refresh)
    },
  }
}
</script>
<style>
.sonData .el-input-group__prepend {
  width: 70px !important;
}
.sonData .el-input__inner {
  min-width: 70px !important;
}
</style>

<style scoped>
.box_body {
  height: 100% !important;
}

.name {
  height: 30px;
}

.box {
  display: flex;
  align-items: start;
}

.sonData {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.sonData > div {
  width: 40%;
  margin-top: 5px;
}

.sonData > div:nth-of-type(2n) {
  margin-left: 20px;
}

.avatar {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 10px;
}

.img_box {
  display: flex;
  align-items: center;
}
</style>

